<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="关键词">
							<el-input
								v-model="search.name"
								placeholder="请输入公众号ID或名字"
								style="width: 200px"
								@change="refresh"
								clearable
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-nick_name="{ scope: { row } }">
						<div class="flex flex-align-center">
							<cl-avatar shape="square" :src="row.head_img" preview class="mr-1" />
							<div :class="{ 'color-danger': row.status == 2 }">
								{{ row.nick_name
								}}<el-tag
									type="danger"
									style="margin-left:4px;"
									v-if="row.status == 2"
									>取消授权</el-tag
								>
							</div>
						</div>
					</template>
					<template #column-customer="{ scope: { row } }">
						<span
							v-for="(item, index) in row.customer"
							:key="index"
							:class="{ 'color-danger': contactDisable(item) }"
						>
							{{ item.user_name }}({{ item.contact_type_desc }}:{{
								item.contact
							}},行为:{{ item.number || 0 }}<contact-upload :item="item" />)
							<el-button type="text" @click="delCus(item, index, row.customer)"
								>移除;</el-button
							>
						</span>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button type="success" @click="uploadMaterial(row)">
								上传素材
							</el-button>

							<el-dropdown
								class="ml-1"
								size="medium"
								@command="command => onCommand(command, row)"
							>
								<el-button>
									更多<i class="el-icon-arrow-down el-icon--right" />
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="edit">修改</el-dropdown-item>
									<el-dropdown-item command="remove"> 删除 </el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</template>
				</cl-table>
			</el-row>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<!-- <land-form ref="landForm" editing @confirm="refresh(false)" /> -->
		<account-form ref="accountform" @confirm="refresh"></account-form>
		<upload-select ref="uploadSelect" />
	</cl-crud>
</template>

<script>
import AccountForm from "./account-form";
import UploadSelect from "./components/upload-select";
import axios from "axios";
export default {
	name: "account-list",
	inject: ["parent"],
	components: {
		AccountForm,
		UploadSelect,
		ContactUpload: {
			props: {
				item: {
					type: Object,
					default: () => ({})
				}
			},
			render(h) {
				const { upload_status, upload_name } = this.item;
				if (upload_status == -1) return "";
				return (
					<span>
						,
						<span class={upload_name ? "color-warning" : "color-danger"}>{`素材${
							upload_name ? "已" : "未"
						}上传`}</span>
					</span>
				);
			}
		}
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ label: "ID", prop: "id", width: 80, fixed: true },
					{
						label: "事业部",
						prop: "biz_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "公众号",
						prop: "nick_name",
						minWidth: 250,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "运营人员",
						prop: "operator_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "服务客服", prop: "customer", align: "left", minWidth: 250 },
					{
						label: "广告账户ID",
						prop: "id_supplier",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "自动回复",
						prop: "auto_response",
						width: 80,
						formatter: row => (row.auto_response == 1 ? "开启" : "关闭")
					},
					{
						label: "运营状态",
						prop: "operation_status",
						width: 80,
						formatter: row => (row.operation_status == 1 ? "开启" : "暂停")
					},
					{
						label: "第三方平台ID",
						prop: "open_platform_app_id",
						minWidth: 150,
						showOverflowTooltip: true
					},

					{ label: "操作", prop: "opt", width: 180, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				bra_id: "",
				name: ""
			}
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		open() {
			this.$refs.accountform.open();
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "wxlist"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true, isadd = false) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
			if (isadd) {
				this.isAdd();
			}
		},
		changeBiz() {
			this.init();
			this.refresh();
		},
		// 链接
		openLink(row) {
			console.log(row);
			this.$refs.configmenu.open(row);
		},
		contactDisable(item) {
			return item.ad_close_date != 1 || item.banci != 0;
		},
		// 移除客服
		async delCus(item, index, list) {
			this.confirm()
				.then(async () => {
					let params = {
						...item,
						type: 3
					};
					await this.$service.ad.cusDel(params);
					this.$message.success("操作成功");
					// this.refresh();
					list.splice(index, 1);
				})
				.catch(() => {});
		},
		// 更多
		onCommand(command, row) {
			this[command](row);
		},
		menu(row) {
			this.$refs.configmenu.open(row);
		},
		sendTplMsg(row) {
			this.$refs.sendTplMsg.open(row);
		},
		//修改
		edit(row) {
			this.$refs.accountform.open(true, row);
		},
		// 删除
		remove({ id }) {
			this.confirm()
				.then(async () => {
					await this.$service.openplatform.del({ id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		
		isAdd() {
			this.$confirm("是否完成授权", "提示", {
				confirmButtonText: "已完成授权",
				cancelButtonText: "重新授权",
				type: "warning"
			})
				.then(() => {
					this.$message({
						type: "success",
						message: "授权成功!"
					});
				})
				.catch(() => {
					this.parent.openOfficialAccount();
				});
		},
		uploadMaterial(row) {
			let { biz_id } = this.search;
			this.$refs.uploadSelect.open(row, biz_id);
		}

	}
};
</script>
